<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <body>
        <div>
            <input type="checkbox" name="aa" value="0" />0
            <input type="checkbox" name=" aa " value="1" />1
            <input type="checkbox" name=" aa " value="2" />2
            <input type="checkbox" name=" aa " value="3" />3
            <input type="button" onclick="abc()" value="提 交" />
            <div id="allselect"></div>
        </div><br>
        <div>
            <form name="a">
                <select name="a" size="1" onchange="_sel(this)">
                    <option value="a">1</option>
                    <option value="b">2</option>
                    <option value="c">3</option>
                </select>
            </form>
        </div><br>
        <div>
            用户名：<input type="text" id="username" /><br />
            密 码：<input type="password" id="password" /><br />
            确认密码：<input type="password" id="password1" /><br />
            <button id="btnSubmit" type="button">提交</button><br />
        </div>
    </body>
    <script type="text/javascript">
        /*
            7、题目描述
            用jQuery编程实现获取选中复选框值
            HTML结构如下：
            <div>
                <input type="checkbox" name="aa" value="0" />0
                <input type="checkbox" name=" aa " value="1" />1
                <input type="checkbox" name=" aa " value="2" />2
                <input type="checkbox" name=" aa " value="3" />3
                <input type="button" onclick="abc()" value="提 交" />
                <div id="allselect"></div>
            </div>
            
            */
        console.log(`======= 第7题 =======`);
        function abc() {
            $(':checkbox').each(
                function () {
                    if (this.checked) {
                        console.log(this.value);
                    }
                }
            )
        }




        /*
        8、题目描述
        实现sel函数显示当前选项的文本和值
        <div>
            <form name="a">
                <select name="a" size="1" onchange="_sel(this)">
                <option value="a">1</option>
                <option value="b">2</option>
                <option value="c">3</option>
                </select>
            </form>
        </div>
        
        function getOptionVal(){
        
        }
        */
        console.log(`======= 第8题 =======`);
        function _sel() {
            $('option').each(
                function () {
                    if (this.selected) {
                        console.log(this.innerText + ' ' + this.value);
                    }
                }
            )
        }

        /*
        9、题目描述
        要求用jQuery完成:  点击id为btn的按钮
        
        a.判断id为username的输入是否为空，如果为空，则弹出“用户名不能为空”的提示。
        
        b.判断id为password的输入字符串个数是否小于6位，如果小于6位，则弹出“你输入的密码长度不可以少于6位”的提示
        
        HTML结构如下：
        <div>
            用户名：<input type="text" id="username"/><br/>
            密  码：<input type="password" id="password"/><br/>
           确认密码：<input type="password" id="password1"/><br/>
            <button id="btnSubmit" type="button">提交</button><br/>
        </div>
        */
        console.log(`======= 第9题 =======`);
        $('#btnSubmit').click(checkName)
        function checkName() {
            if ($('#username')[0].value == '') {
                alert('用户名不能为空');
            }
            if (($('#password')[0].value).length < 6) {
                alert('你输入的密码长度不可以少于6位')
            }
        }

    </script>

</html>